<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.subject{
				position:fixed;
				right:100px;
				height:100px;
			}
			.subject div{
				width:100px;
				text-align: center;
			}
			.subject div a{
				text-decoration: none;
				color:black;
			}
			
			*{
				margin:0;
				padding:0;
			}
			.all{
				width:300px;
				height:300px;
				background:pink;
			}
			.check{
				overflow:hidden;
			}
			.check div{
				float:left;
				width:33.33%;
				height:50px;
				text-align: center;
				background:skyblue;
			}
			.contents{
				width:100%;
				height:250px;
				background:silver;
				overflow: hidden;
			}
			.contents div{
				width:100%;
				height:250px;
			}
			.one1{
				display:block
			}
			.one11{
				display:none;
			}
			.one2{
				display:none;
			}
			.one22{
				display:block
			}
			.one3{
				display:none;
			}
			.one33{
				display:block;
			}
		</style>
	</head>
	<body>
		<div class="subject">
			<div><a href="index.html">图片收起展开</a></div>
			<div><a href="task2.html">回到顶部</a></div>
			<div><a href="task3.html">选项卡</a></div>
		</div>
		
		<!--选项卡-->
		<div class="all">
			<div class="check">
				<div class="one">1</div>
				<div class="two">2</div>
				<div class="three">3</div>
			</div>
			<div class="contents">
				<div class="one1">1</div>
				<div class="one2">2</div>
				<div class="three3">3</div>
			</div>
		</div>
		
		
		<script>
			var one = document.getElementsByClassName("one");
			var two = document.getElementsByClassName("two");
			var three = document.getElementsByClassName("three");
			one.addEventListener("click",function(){
				
			})
			two.addEventListener("click",function(){
				
			})
			three.addEventListener("click",function(){
				
			})
			
		</script>
	</body>
</html>
